<template>
     <div>
         <div class="editInfo">
             <div class="header">
                 <Myhead headName="编辑资料" @tojemp="toBack"/>
             </div>
             <div class="user-pic">
                <img :src="user.head_img" alt="">
                <van-uploader :after-read="uploadImg" />
            </div>
         </div>
         <div class="info-set">
            <AboutMe name="昵称" :desc="user.nickname && user.nickname.length > 6 ? user.nickname.substr(0,6) + '...':user.nickname" @click.native="showNickName = true;nickName=user.nickname"/>
            <AboutMe name="密码" desc="******" @click.native="showPassword = true"/>
            <AboutMe name="性别" :desc="user.gender" @click.native="showGender = true"/>
         </div>
         <!-- 编辑昵称 -->
         <van-dialog 
         v-model="showNickName" 
         title="编辑昵称" 
         show-cancel-button
         confirmButtonColor="pink"
         cancelButtonColor="#c0c0c0"
         @confirm="editUserInfo({'nickname':nickName})"	
         >
            <van-field v-model="nickName" placeholder="请输入昵称"/>
         </van-dialog>
         <!-- 编辑密码 -->
         <van-dialog 
         v-model="showPassword" 
         title="编辑密码" 
         show-cancel-button
         confirmButtonColor="pink"
         cancelButtonColor="#c0c0c0"
         @confirm="editUserInfo({'password':password})"
         >
            <van-field v-model="password" placeholder="请输入新密码"/>
         </van-dialog>
         <!-- 编辑性别 -->
         <van-action-sheet v-model="showGender" :actions="actions" @select="onSelect" cancel-text="取消" close-on-click-action/>
     </div>
</template>

<script>
import Myhead from '../../components/MyHeader'
import AboutMe from '../../components/AboutMe'
export default {
    data(){
        return{
           user:{},
           showNickName:false,
           showPassword:false,
           showGender:false,
           nickName:'',
           password:'',
           gender:'',
           actions:[
               { name: '男', gender:'1'}, 
               { name: '女',gender:'0' }
           ]
        }
    },
    components:{
        Myhead,
        AboutMe
    },
    methods:{
        getUserInfo(){
            //从本地储存中获取userId
            this.$axios({
                url:'/user/'+ localStorage.getItem('userId'),
                method:'get'
            }).then(res => {
                this.user = res.data.data;
                this.user.gender = this.user.gender == 1 ? '男':'女';
                this.user.head_img = this.user.head_img ? this.$axios.defaults.baseURL+this.user.head_img:'../../assets/user1.jpg';
            });
        },
        toBack(){
            this.$router.back();
        },
        editUserInfo(userObj){
            // 校验
            const regExpNick = new RegExp(/^[a-zA-Z0-9_-]{4,10}$/);
            const regExpPass = new RegExp(/^\d{6}$/);
            // 拦截空值
            for(let key in userObj){
                let keyName = key == 'nickname'?'昵称':key == 'password'?'密码':key == 'url'?'头像':'性别';
                if(!userObj[key]){
                    this.$toast.fail(keyName + '不能为空');
                    return;
                }
                
                if(keyName != '头像' && keyName != '性别'){
                    console.log(userObj[key]);
                    if(!(regExpNick.test(userObj[key]) || regExpPass.test(userObj[key]))){
                        this.$toast.fail(keyName + '输入有误');
                        return;
                   }
                }
            }

            this.$axios({
                url:'/user_update/'+localStorage.getItem('userId'),
                method:'post',
                data:userObj
            }).then(res=>{
                if(res.data.message == '修改成功'){
                    this.password = '';
                    this.getUserInfo();
                    this.$toast.success(res.data.message);
                }
            });
        },
        onSelect(item){
            this.editUserInfo({'gender':item.gender});
        },
        uploadImg(fileObj){
            // 会接受一个参数 fileObj 文件对象
            // 其中文件就在 fileObj.file
            // 先将图片转成二进制的参数格式
            let formdata = new FormData();
            formdata.append('file',fileObj.file);
            this.$axios({
                url:'/upload',
                method:'post',
                data:formdata
            }).then(res=>{
                if(res.data.message == '文件上传成功'){
                   this.editUserInfo({'head_img':res.data.data.url});
                }
            })
            
        }
    },
    mounted(){
        this.getUserInfo();
    }
}
</script>

<style lang="less" scoped>
.editInfo{
    height: 52.778vw;
    .user-pic{
        position: relative;
    text-align: center;
        img{
            width: 19.444vw;
            height: 19.444vw;
            border-radius: 50%;
            vertical-align: middle;
        }
    }
}
.info-set{
    padding-left:6.111vw;//22
}
.van-uploader{
    position: absolute;
    top: 0;
    left: 37.5vw;
    opacity: 0;//透明度为0
}

</style>